<template>
  <div style="background-color:rgb(241,244,248);height:92vh">
    <div class="mycard">
      <img :src="this.userimg" style="position:absolute;top:2vh;left:10vw;width:25vw;">
      <span style="display:inline-block;margin-top:40px;margin-left:40px;font-size:30px;font-family:bold">{{ username }}</span><br>
      <span style="display:inline-block;margin-top:5px;margin-left:38px;font-size:15px">{{ depname }}</span>
    </div>
    <van-cell clickable @click="changePwd">
      <div style="text-align:center;">修改密码</div>
    </van-cell>
    <van-cell clickable @click="modefyInfo">
      <div style="text-align:center;">修改信息</div>
    </van-cell>
    <van-cell style="margin-top:1vh;" clickable @click="loginout">
      <div style="text-align:center;">退出登录</div>
    </van-cell>
    <van-tabbar v-model="buttomactive" safe-area-inset-bottom>
      <van-tabbar-item icon="home-o" @click="menuChange('homepage')">主页</van-tabbar-item>
      <van-tabbar-item icon="label-o" @click="menuChange('flowlist')">审批</van-tabbar-item>
      <van-tabbar-item icon="qr" @click="menuChange('main')">功能</van-tabbar-item>
      <van-tabbar-item icon="chart-trending-o" @click="menuChange('report')">分析</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="menuChange('mine')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridItem, Toast, Popup, Tabbar, TabbarItem } from 'vant'
import qs from 'qs'
// import wx from 'weixin-js-sdk'

Vue.use(Grid).use(GridItem).use(Toast).use(Popup).use(Tabbar).use(TabbarItem)
export default {
  name: 'mine',
  data () {
    return {
      buttomactive: 4,
      userimg: '../../src/assets/people.png',
      username: '',
      depname: '',
      logintype: ''
    }
  },
  created: function () {
    let data = {}
    this.axios({
      method: 'post',
      url: '/api/default.menu.do',
      data: qs.stringify(data)
    }).then(res => {
      //console.log(res)
      if (res.data.flag === '1') {
        Toast(res.data.des)
        if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
          this.loginout()
        }
      } else {
        this.username = res.data.jsondata.username
        this.depname = res.data.jsondata.depname
        this.userimg = 'data:image/jpg;base64,' + res.data.jsondata.userimg
      }
    }).catch(res => {
      this.reserror(res)
    })
  },
  methods: {
    menuChange (option) {
      if (option === 'flowlist') {
        this.$router.push({ name: 'flowlist', query: { idobject: 'flowclmx', actiontype: 'mytask', actioncode: 'unhandle', stitle: 'flowclmx' } })
      } else if (option === 'report') {
        this.$router.push({ name: 'reportlist', query: { idobject: 'report', stitle: 'report' } })
      } else if (option === 'main') {
        this.$router.push({ name: 'main' })
      } else if (option === 'homepage') {
        this.$router.push({ name: 'homepage' })
      } else if (option === 'mine') {
        this.$router.push({ name: 'mine' })
      }
    },
    /* loginout () {
      let ua = window.navigator.userAgent.toLowerCase()

       if (ua.indexOf('wxwork') !== -1) {
        this.logintype = 'wxwork'
      } else if (ua.indexOf('dingtalk') !== -1) {
        this.logintype = 'dingding'
      } else if (ua.indexOf('micromessenger') !== -1) {
        this.logintype = 'wechat'
      } else if (ua.indexOf('tenantid') !== -1) {
        // 友空间
        this.logintype = 'ykj'
      } else {
        this.logintype = 'nosass'
      }
      // 非sass模式
      let projectData = require('@/project.json')
      // //console.log('projectData', projectData)
      if (projectData.project && projectData.project == 'dinuo/') {
        //console.log(' inter logtype:', 'nosass')
          this.axios({
          method: 'post',
          url: '/nosaaslogout',
          data: {}
        }).then(res => {
          //console.log(res)
          if (res.data.tsxx == 'ok') {
            //console.log('inner...', res.tsxx)
            //console.log('url', window.location.href)
            window.location.href = '/'
          }
        }).catch(res => {
          this.reserror(res)
        })
        return
      }
      this.axios({
        method: 'post',
        url: '/api/login.loginout.do',
        data: {}
      }).then(res => {
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          this.$router.push({ name: 'home' })
        }
      }).catch(res => {
        this.reserror(res)
      })
    }, */
    changePwd () {
      this.$router.push({
        path: '/changpwd',
        query: {
          username: this.username
        }
      })
    },
    openUserPopup () {
      this.usershow = true
    },
    modefyInfo () {
      this.$router.push({ name: 'modifyInfo' })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.maintop {
  width: 100%;
  height: 20vh;
  background: linear-gradient(to bottom, #0072FB 0%, #1BA0DA 100%);
}

.menutitle {
  padding: 10px;
  font-size: 14px;
}

.mycard {
  background-image: url("../assets/card.jpg");
  height: 20vh;
  color: white;
  text-align: center;
  margin-bottom: 1vh;
}
</style>
